import React, { useState, useEffect } from "react";
import { Toast, NavBar, Cell } from "react-vant";
import { useNavigate } from "react-router-dom";
import { ArrowLeft, ClockO, GemO, Passed } from "@react-vant/icons";

import axios from "../axios/index";
import { doesNotMatch } from "assert";
type Props = {};

const Querydata = (props: Props) => {
  const navigate = useNavigate();
  const [title, setTitle]: any = useState(localStorage.getItem("dz"));
  const [title2, setTitle2]: any = useState(localStorage.getItem("dz2"));
  const [list, setList] = useState([]);
  const [data, setData] = useState([]);
  const [flog, setFlog] = useState(true);

  useEffect(() => {
    axios.get("http://localhost:8080/querydata").then((res) => {
      console.log(res.data);
      setList(res.data);
      setData(res.data);
    });
  }, []);
  //筛选
  const shaixuan = () => {
    if (flog) {
      setFlog(false);
      data.sort((a: any, b: any) => {
        return a.price - b.price;
      });
      localStorage.setItem("aaaaa", JSON.stringify(data));
      let arr = JSON.parse(localStorage.getItem("aaaaa") as any);
      setList(arr);
    } else {
      setFlog(true);
      data.sort((a: any, b: any) => {
        return b.price - a.price;
      });
      localStorage.setItem("aaaaa", JSON.stringify(data));
      let arr = JSON.parse(localStorage.getItem("aaaaa") as any);
      setList(arr);
    }
  };
  const shaixuan2 = () => {
    let arr = data.filter((item: any, index: any) => {
      return item.state.charAt(0) === "G";
    });
    console.log(arr);
    setList(arr);
  };
  const shaixuan3 = () => {
    let arr = data.filter((item: any, index: any) => {
      return item.status.includes("有票");
    });
    setList(arr);
  };

  const xq = (item: any) => {
    localStorage.setItem('shuju',JSON.stringify(item))
    if (item.status === "有票" || item.status === "可抢票") {
      navigate("/seat");
    }else{
      Toast.fail('无票')
    }
  };
  return (
    <div className="querydatas">
      <header>
        <div className="querydatas_title">
          <div onClick={() => navigate("/home/index")}>
            <ArrowLeft />
          </div>
          <div>
            {title}-{title2}
          </div>
        </div>
      </header>
      <main>
        <div className="main_title">
          <span>前一天</span>
          <span>7月11日 周二</span>
          <span>后一天</span>
        </div>
        <div className="main_box">
          {list &&
            list.map((item: any, index: any) => {
              return (
                <div
                  className="main_box_nr"
                  key={index}
                  onClick={() => xq(item)}
                >
                  <div>
                    <p>{item.starttime}</p>
                    <p>{item.endtime}</p>
                  </div>
                  <div>
                    <p>{item.start}</p>
                    <p>{item.end}</p>
                  </div>
                  <div>
                    <p>{item.state}</p>
                    <p>{item.shijain}</p>
                  </div>
                  <div>
                    <p>￥{item.price}</p>
                    <p>{item.status}</p>
                  </div>
                </div>
              );
            })}
        </div>
      </main>
      <footer>
        <dl onClick={shaixuan}>
          <dt>
            <ClockO />
          </dt>
          <dd>{flog ? "时间长短 短-长" : "好使 长-短"}</dd>
        </dl>
        <dl onClick={shaixuan2}>
          <dt>
            <GemO />
          </dt>
          <dd>只看高铁动车</dd>
        </dl>
        <dl onClick={shaixuan3}>
          <dt>
            <Passed />
          </dt>
          <dd>只看有票</dd>
        </dl>
      </footer>
    </div>
  );
};

export default Querydata;
